<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        backgroundColor: "#0f375f",
        textStyle: {
            fontSize: 16
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true
                }
            }
        },
        legend: {
            data: ["销售量", "业务1", "业务2"],
            top: "2%",
            right: '10',
            textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 16
            }
        },
        xAxis: {
            data: [],
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#26D9FF',
                    width: 2
                }
            },
            axisTick: {
                show: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
                }
            }
        },
        yAxis: [{
            type: "value",
            name: "亿元",
            nameTextStyle: {
                color: "#ebf8ac",
                fontSize: 16
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#26D9FF',
                    width: 2
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16
                }
            },
        }],
        series: [
            {
                name: "",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(61,126,235, 1)"
                        },
                            {
                                offset: 1,
                                color: "rgba(61,126,235, 0)"
                            }
                        ]),
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(160,196,225, 1)"
                        },
                            {
                                offset: 1,
                                color: "rgba(61,126,235, 1)"
                            }
                        ]),
                        borderWidth: 2
                    }
                },
                data: []
            },
            {
                name: "",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(15,197,243,1)' }, { offset: 1, color: 'rgba(15,197,243,0)' }]),
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(180,240,255,1)' }, { offset: 1, color: 'rgba(15,197,243,1)' }]),
                        borderWidth: 2
                    }
                },
                data: []
            }
        ]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/bar/two/1',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                if(Array.isArray(option.xAxis)) {
                    result.data.xAxis.forEach(function (item, index) {
                        option.xAxis[index].data = item.data;
                        option.xAxis[index].type = item.type;
                        if (item.name) {
                            option.xAxis[index].name = item.name;
                        }
                    });
                }else {
                    let item = result.data.xAxis[0];
                    option.xAxis.data = item.data;
                    option.xAxis.type = item.type;
                    if (item.name) {
                        option.xAxis.name = item.name;
                    }
                }

                if(Array.isArray(option.yAxis)) {
                    result.data.yAxis.forEach(function (item, index) {
                        option.yAxis[index].type = item.type;
                        option.yAxis[index].name = item.name;
                        if (item.data) {
                            option.yAxis[index].data = item.data;
                        }
                    });
                }else {
                    let item = result.data.yAxis[0];
                    option.yAxis.type = item.type;
                    option.yAxis.name = item.name;
                    if (item.data) {
                        option.yAxis.data = item.data;
                    }
                }

                option.series.forEach(function (item,index) {
                    item.data = result.data.series[index].data;
                    item.name = result.data.series[index].name;
                });

                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
